<template>
  <div class="hc-custom-map">
    <div class="hc-sidebar">
      <div class="hc-sidebar-title">路线坐标</div>
      <div class="hc-sidebar-content">
        <div v-for="(coord, index) in coordinates" :key="index">{{ coord.lng }},{{ coord.lat }}</div>
      </div>
    </div>
    <div class="hc-map-container" id="map-container"></div>
    <div class="hc-draw-buttons" v-if="showControl">
      <el-button type="primary" size="mini" @click="drawPolyline">绘制路线</el-button>
      <el-button type="primary" size="mini" @click="stopDrawing">停止绘制</el-button>
      <el-button type="primary" size="mini" @click="drawClean">清除</el-button>
    </div>
  </div>
</template>

<script>
import unit from '../mapLeaflet/unit'

export default {
  name: 'RouteDrawer',
  props: {
    showControl: {
      type: Boolean,
      default: true
    },
    defaultDrawLine: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      map: null,
      coordinates: null,
      drawControl: null,
      drawLayerGroup: null,
      drawObj: null
    }
  },
  methods: {
    drawCreatedBack(event) {
      console.log("完成绘制路线，执行回填数据")
      const { layer } = event
      this.coordinates = layer.getLatLngs().map(latlng => ({ lat: latlng.lat, lng: latlng.lng }));
      if (this.coordinates && this.coordinates.length !=0)
      {
        this.$emit('drawCreatedBack', this.coordinates)
      }
      this.drawLayerGroup.addLayer(layer)
    },
    drawPolyline() {
      this.drawObj = new L.Draw.Polyline(this.map, this.drawControl.options.draw.polyline)
      this.drawObj.enable()
    },
    stopDrawing() {
      if (this.drawObj) {
        this.drawObj.disable()
      }
    },
    drawClean() {
      if (this.drawLayerGroup) {
        this.drawLayerGroup.clearLayers()
        this.coordinates = []
      }
      if (this.drawObj) {
        this.drawObj.disable()
      }
    },
    showDrawPolyline(coords) {
      this.polyline = L.polyline(coords, { color: 'blue' }).addTo(this.map);
      this.drawLayerGroup.addLayer(this.polyline);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.coordinates = this.defaultDrawLine;
      this.map = unit.map.createMap('map-container', { crs: L.CRS.EPSG4326 })
      // 设置地图视图 中心位置
      this.map.setView([30.449148, 114.358198], 13)
      // 加载 open street map和mapbox 图层服务
      unit.map.createTDTWMTSLayer(this.map, { maxZoom: 17 })

      this.drawLayerGroup = unit.map.createFeatureGroup(this.map)

      this.drawControl = unit.map.createDrawControl(this.map, this.drawCreatedBack, {
        draw: {
          polyline: {
            shapeOptions: {
              color: 'red'
            }
          },
          polygon: false,
          rectangle: false,
          circle: false,
          marker: false,
          circlemarker: false
        }
      })
      unit.map.createMapArea(this.map, this.drawLayerGroup)
      if (this.coordinates) {
        this.coordinates = JSON.parse(this.coordinates);
        this.showDrawPolyline(this.coordinates);
        let curCoordinate = this.coordinates[0];
        if (curCoordinate)
        {
          this.map.setView([curCoordinate.lat, curCoordinate.lng], 17)
        }
      }
      else
      {
        this.coordinates = [];
        this.map.locate({ setView: true, maxZoom: 17 });
      }

      /* this.map.on('locationfound', (e) => {
        const radius = e.accuracy / 2;
        L.circle(e.latlng, radius).addTo(this.map);
      });

      this.map.on('locationerror', (e) => {
        alert(e.message);
      }); */
    })
  }
}
</script>

<style scoped>
.hc-custom-map {
    display: flex;
    width: 100%;

    .hc-sidebar {
        width: 30%;
        padding: 10px;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .hc-sidebar-title {
        font-size: 15px;
        font-weight: bold;
    }

    .hc-sidebar-content {
        overflow: auto;
        font-size: 12px;
    }

    .hc-map-container {
        width: 70%;
    }

    .hc-draw-buttons {
        position: absolute;
        z-index: 999;
        right: 10px;
        top: 15px;
        display: flex;
    }
}


</style>
